<template>
  <el-card class="table-card">
    <template #header>
      <div class="table-header">
        <span>入库单列表</span>
        <div class="table-actions">
          <el-button-group>
            <el-button 
              :icon="Sort" 
              @click="handleSort('inbound_date')"
              class="sort-btn"
            >
              按入库日期
            </el-button>
            <el-button 
              :icon="Sort" 
              @click="handleSort('total_amount')"
              class="sort-btn"
            >
              按金额
            </el-button>
          </el-button-group>
        </div>
      </div>
    </template>

    <el-table
      :data="tableData"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
      class="inbound-table"
      highlight-current-row
      stripe
    >
      <el-table-column type="selection" width="50" />
      
      <el-table-column prop="inboundNumber" label="入库单号" min-width="150" fixed>
        <template #default="{ row }">
          <div class="inbound-number-cell">
            <span class="inbound-number">{{ row.inboundNumber }}</span>
            <el-tag size="small" :type="getInvoiceStatusType(row.invoiceStatus)" class="status-tag">
              {{ getInvoiceStatusText(row.invoiceStatus) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="supplierName" label="供应商" width="180">
        <template #default="{ row }">
          <div class="supplier-cell">
            <div class="supplier-name">{{ row.supplierName }}</div>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="items" label="商品信息" width="200">
        <template #default="{ row }">
          <div class="items-cell">
            <div v-for="item in row.items.slice(0, 2)" :key="item.id" class="item-row">
              {{ item.productName }} × {{ item.quantity }}
            </div>
            <div v-if="row.items.length > 2" class="more-items">
              +{{ row.items.length - 2 }} 更多
            </div>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="totalAmount" label="总金额" width="120" sortable>
        <template #default="{ row }">
          <div class="amount-cell">
            ¥{{ formatCurrency(row.totalAmount) }}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="freight" label="运费" width="100">
        <template #default="{ row }">
          <div class="freight-cell">
            ¥{{ formatCurrency(row.freight) }}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="inboundDate" label="入库日期" width="120" sortable>
        <template #default="{ row }">
          {{ formatDate(row.inboundDate) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="remark" label="备注" width="150">
        <template #default="{ row }">
          <div class="remark-cell">
            {{ row.remark || '-' }}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              link 
              :icon="View" 
              @click.stop="showDetail(row)"
              class="action-btn detail-btn"
            >
              详情
            </el-button>
            
            <el-button 
              type="warning" 
              link 
              :icon="Edit" 
              @click.stop="editInboundOrder(row)"
              class="action-btn edit-btn"
            >
              编辑
            </el-button>
            
            <el-dropdown @command="(command) => handleMoreAction(command, row)">
              <el-button type="info" link :icon="More" class="action-btn more-btn" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="print" :icon="Printer">
                    打印入库单
                  </el-dropdown-item>
                  <el-dropdown-item command="invoice" :icon="Document" v-if="row.hasInvoice">
                    发票管理
                  </el-dropdown-item>
                  <el-dropdown-item command="clone" :icon="CopyDocument">
                    复制入库单
                  </el-dropdown-item>
                  <el-dropdown-item 
                    command="delete" 
                    :icon="Delete"
                    divided
                  >
                    删除入库单
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { 
  View, Edit, More, Delete, Sort, Printer, Document, CopyDocument
} from '@element-plus/icons-vue'
import { formatCurrency, formatDate } from '@/utils/formatters'

interface InboundOrderItem {
  id: number
  productName: string
  specification: string
  quantity: number
  unitPrice: number
}

interface InboundOrder {
  id: number
  inboundNumber: string
  supplierId: number
  supplierName: string
  inboundDate: string
  totalAmount: number
  hasInvoice: boolean
  invoiceStatus: string
  freight: number
  remark: string
  items: InboundOrderItem[]
}

interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

const props = defineProps<{
  tableData: InboundOrder[]
  loading: boolean
  pagination: Pagination
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: InboundOrder[]): void
  (e: 'row-click', row: InboundOrder): void
  (e: 'sort-change', sortField: string, sortOrder: string): void
  (e: 'page-change', page: number, limit: number): void
  (e: 'detail', row: InboundOrder): void
  (e: 'edit', row: InboundOrder): void
  (e: 'delete', row: InboundOrder): void
  (e: 'more-action', command: string, row: InboundOrder): void
}>()

const handleSelectionChange = (selection: InboundOrder[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: InboundOrder) => {
  emit('row-click', row)
}

const handleSortChange = ({ prop, order }: any) => {
  if (prop) {
    emit('sort-change', prop, order === 'ascending' ? 'asc' : 'desc')
  }
}

const handleSizeChange = (size: number) => {
  emit('page-change', props.pagination.currentPage, size)
}

const handleCurrentChange = (page: number) => {
  emit('page-change', page, props.pagination.pageSize)
}

const handleSort = (field: string) => {
  emit('sort-change', field, 'desc')
}

const showDetail = (row: InboundOrder) => {
  emit('detail', row)
}

const editInboundOrder = (row: InboundOrder) => {
  emit('edit', row)
}

const handleMoreAction = (command: string, row: InboundOrder) => {
  emit('more-action', command, row)
}

const getInvoiceStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'received': return 'warning'
    case 'uploaded': return 'success'
    default: return 'info'
  }
}

const getInvoiceStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待开票'
    case 'received': return '已收票'
    case 'uploaded': return '已上传'
    default: return '未知'
  }
}
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbound-table {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.inbound-number-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.items-cell .item-row {
  margin-bottom: 2px;
}

.items-cell .more-items {
  color: #909399;
  font-size: 12px;
}

/* 按钮动画效果 */
.sort-btn,
.action-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sort-btn:hover,
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sort-btn:active,
.action-btn:active {
  transform: translateY(0);
}

.sort-btn::after,
.action-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.sort-btn:active::after,
.action-btn:active::after {
  width: 300px;
  height: 300px;
}

/* 特殊按钮样式 */
.detail-btn {
  color: #409eff;
}

.detail-btn:hover {
  color: #66b1ff;
}

.edit-btn {
  color: #e6a23c;
}

.edit-btn:hover {
  color: #ebb563;
}

.more-btn {
  color: #909399;
}

.more-btn:hover {
  color: #a6a9ad;
}

/* 标签悬停效果 */
.status-tag {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-tag:hover {
  transform: scale(1.1);
}

/* 表格行悬停效果 */
:deep(.el-table__body tr:hover) {
  background-color: #f5f7fa !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .sort-btn {
    flex: 1;
    min-width: 120px;
  }
}
</style>